<template>
    <div>
        <div class="count-head com_box pd_20">
            <div class="flexbox flexcenter flexbetween">
                <div class="count-title">数据概览</div>
                <el-date-picker size="small" v-model="dates" value-format="yyyy-MM-dd" @change="getDates()" style="width:220px" :clearable='false' type="week" :picker-options="{firstDayOfWeek:1}" format="yyyy 年 MM 月 第 WW 周" placeholder="选择周">
                </el-date-picker>
            </div>
            <Count :countData="countData" v-loading="count_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)" />
        </div>
        <div class="count-content com_box pd_20" v-loading="pro_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="flexbox flexcenter flexbetween">
                <div class="count-tab flexbox flexcenter">
                    <div class="tab-item" :class="{'active':types==1}" @click="seletTab(1)">项目产能</div>
                    <div class="tab-item" :class="{'active':types==2}" @click="seletTab(2)">人员产能</div>
                </div>
                <el-input style="width:216px" v-if="types==1" clearable size="small" placeholder="请输入项目名称搜索" suffix-icon="el-icon-search" @change="getProject(1)" v-model="proData.query">
                </el-input>
                <el-input style="width:216px" v-else clearable size="small" placeholder="请输入人员名称搜索" suffix-icon="el-icon-search" @change="getMember()" v-model="memberData.query">
                </el-input>
            </div>
            <Project :projectList="projectList" :proData="proData" :proTotal="proTotal" @getProject="getProject" v-if="types==1" key="project" />
            <div class="member-box" v-else key="member">
                <el-radio-group v-model="memberData.type" size="small" @change="getMember()">
                    <el-radio-button label="editor">剪辑</el-radio-button>
                    <el-radio-button label="centre">编导</el-radio-button>
                </el-radio-group>
                <Member :membetList="membetList"/>
            </div>
        </div>
    </div>
</template>

<script>
import Count from "./model/Count";
import Project from "./model/Project";
import Member from "./model/Member";
export default {
    components: {
        Count,
        Project,
        Member,
    },
    name: "",
    data() {
        return {
            count_loading: false,
            pro_loading:false,
            types: 1,
            dates: "",
            countData: {},
            projectList: [],
            membetList:[],
            yearData: {
                year: null,
                week: null,
            },
            proTotal: 0,
            proData: {
                page: 1,
                limit: 10,
                query: "",
            },
            memberData: {
                type: "editor",
                query: "",
            },
        };
    },
    created() {
        this.dates = this.dayjs().format("YYYY-MM-DD");
        this.yearData.year = this.dayjs(this.dates).year();
        this.yearData.week = this.dayjs(this.dates).week();
        this.getCount();
        this.getProject(1);
    },
    methods: {
        getDates() {
            this.yearData.year = this.dayjs(this.dates).year();
            this.yearData.week = this.dayjs(this.dates).week();
            this.getCount();
            this.getSwitch();
        },

        seletTab(val) {
            if (this.types == val) {
                return;
            }
            this.types = val;
            this.getSwitch();
        },

        getSwitch() {
            if (this.types == 1) {
                this.proData.page = 1
                this.proData.query = ''
                this.getProject(1);
            } else if (this.types == 2) {
                // this.memberData.type = 'editor'
                this.memberData.query = ''
                this.getMember()
            }
        },

        // 获取数据概览
        async getCount() {
            this.count_loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/Demandcount/dataCount",
                this.yearData
            );
            if (res.code !== 200) {
                this.count_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.count_loading = false;
                this.countData = res.data;
                this.countData.progress_num = (
                    res.data.finish_num / res.data.capacity_num *100
                ).toFixed(0) | 0;
            }
        },

        // 获取项目产能
        async getProject(page) {
            this.pro_loading = true;
            this.proData.page = page;
            const { data: res } = await this.$http.post(
                "adminapi/Demandcount/projectCapacity",
                {
                    ...this.yearData,
                    ...this.proData,
                }
            );
            if (res.code !== 200) {
                this.pro_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.pro_loading = false;
                this.projectList = res.data.list;
                this.proTotal = res.data.count;
            }
        },

        // 获取项目产能
        async getMember() {
            this.pro_loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/Demandcount/peopleCapacity",
                {
                    ...this.yearData,
                    ...this.memberData,
                }
            );
            if (res.code !== 200) {
                this.pro_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.pro_loading = false;
                this.membetList = res.data.list
            }
        },
    },
};
</script>


<style scoped>
.count-title {
    font-size: 18px;
    color: #17233d;
    font-weight: 700;
}
.count-content {
    margin-top: 12px;
    min-height: 750px;
}
.tab-item {
    font-size: 18px;
    color: #5c636c;
    line-height: 28px;
    padding: 0 12px 12px;
    box-sizing: border-box;
    border-bottom: 2px solid transparent;
    font-weight: 700;
    cursor: pointer;
}
.tab-item.active {
    color: #17233d;
    border-bottom: 2px solid #4475ff;
}
.member-box {
    margin-top: 12px;
}
</style>
